<template>
  <div>
    这是首页

    <h1>计数器</h1>
    <p>当前计数: {{ count }}</p>
    当前计数的两倍: {{ doubleCount }}
    <button @click="ADD">增加</button>
  </div>
</template>

<script>
// 导入 Vuex 的 mapGetters 和 mapActions 辅助函数
import { mapState, mapGetters } from 'vuex';
export default {
  name: 'HomeView',
  data() {
    return {};
  },
  computed: {
    // 使用 mapGetters 辅助函数来映射 getter
    ...mapState(['count']),
    ...mapGetters(['doubleCount']), // 映射 doubleCount getter
  },
  methods: {
    ADD() {
      // 使用mutations 来修改状态
      this.$store.commit('increment');

      // 使用 actions 来修改状态
      // this.$store.dispatch('ADD')
    },
  },
};
</script>

<style lang="scss" scoped></style>
